<template>
  <div class="risk">
    <van-search
      class="info_search"
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="_submit()">完成</div>
      </template>
    </van-search>
    <van-tabs v-model="active">
      <van-tab title="益戈标识库">
        <van-list
          style="margin-top: 10px"
          :finished="finished"
          v-model="loading"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="list">
            <van-checkbox-group v-model="result" @change="handleChange">
              <van-row :gutter="20" type="flex">
                <van-col
                  span="8"
                  v-for="(item, index) in list"
                  :key="index"
                  type="flex"
                  class="list-item"
                >
                  <van-col span="24" class="colstyle" type="flex">
                    <div style="display: table-caption;">
                      <van-image
                        class="ml-10 image-box-shadow"
                        width="50"
                        height="50"
                        fit="MarkAttach"
                        :src="baseUrl + item.MarkAttach"
                      />
                    </div>
                    <div
                      class="mb-5 mt-10"
                      type="flex"
                      style="line-height:1.3;"
                    >
                      {{ item.MarkName }}
                    </div>
                    <div>
                      <van-checkbox :name="item.MarkCode" />
                    </div>
                  </van-col>
                </van-col>
              </van-row>
            </van-checkbox-group>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="公司标识库">
        <van-list
          style="margin-top: 10px"
          :finished="myFinished"
          v-model="myLoading"
          finished-text="没有更多了"
          @load="myOnLoad"
        >
          <div class="list">
            <van-checkbox-group v-model="result" @change="handleUpChange">
              <van-row :gutter="20" type="flex">
                <van-col
                  span="8"
                  v-for="(item, index) in myList"
                  :key="index"
                  type="flex"
                  class="list-item"
                >
                  <van-col span="24" class="colstyle" type="flex">
                    <div style="display: table-caption;">
                      <van-image
                        class="ml-10 image-box-shadow"
                        width="50"
                        height="50"
                        fit="MarkAttach"
                        :src="baseUrl + item.MarkAttach"
                      />
                    </div>
                    <div
                      class="mb-5 mt-10"
                      type="flex"
                      style="line-height:1.3;"
                    >
                      {{ item.MarkName }}
                    </div>
                    <div>
                      <van-checkbox :name="item.MarkCode" />
                    </div>
                  </van-col>
                </van-col>
              </van-row>
            </van-checkbox-group>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getRiskMark } from "@/api/riskMark";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["baseUrl"]),
  },
  props: {
    Codes: {
      type: String,
      required: false,
    },
  },
  data() {
    return {
      active: 0,
      upResult: [],
      list: [],
      myList: [],
      markSyslist: [],
      markCompanylist: [],
      result: [],
      onload: false,
      loading: false,
      finished: false,
      myLoading: false,
      myFinished: false,
      filter: {
        page: 0,
        dataType: "Sys",
        PageType: "OpRegulation",
      },
      myFilter: {
        page: 0,
        dataType: "Company",
        PageType: "OpRegulation",
      },
      border: false,
      value: "",
      radio: "",
    };
  },
  created() {
    this.getList();
    this.getMyList();
  },
  methods: {
    onSearch() {
      var conditions = [];
      if (this.value) {
        conditions.push({
          Name: "Keywords",
          DisplayName: this.value,
          Value: this.value,
          Operator: "like",
          DataType: "String",
        });
      }

      this.myFilter.page = 0;
      this.myFilter.conditions = JSON.stringify(conditions);
      this.getMyList();

      this.filter.page = 0;
      this.filter.conditions = JSON.stringify(conditions);
      this.getList();
    },
    handleChange(ids) {
      this.markSyslist = [];
      ids.map((item) => {
        this.list.map((innerItem) => {
          if (innerItem.MarkCode == item) {
            this.markSyslist.push({
              code: innerItem.MarkCode,
              name: innerItem.MarkName,
              attachs: innerItem.MarkAttach,
            });
          }
        });
      });
    },
    handleUpChange(ids) {
      this.markCompanylist = [];
      ids.map((item) => {
        this.myList.map((innerItem) => {
          if (innerItem.MarkCode == item) {
            this.markCompanylist.push({
              code: innerItem.MarkCode,
              name: innerItem.MarkName,
              attachs: innerItem.MarkAttach,
            });
          }
        });
      });
    },
    _submit() {
      this.$emit("cb", [...this.markSyslist, ...this.markCompanylist]);
    },
    getList() {
      this.loading = true;
      getRiskMark(this.filter)
        .then((res) => {
          this.loading = false;
          this.list = res.data.Data;
          this.finished = true;
          //this.filter.page = res.data.PageIndex;
        })
        .catch((err) => {
          this.finished = true;
        });
    },
    onLoad() {
      this.loading = true;
      ++this.filter.page;
      getRiskMark(this.filter).then((res) => {
        this.loading = false;
        this.filter.page = res.data.PageIndex;
        this.list = this.list.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
      });
    },
    getMyList() {
      this.loading = true;
      getRiskMark(this.myFilter)
        .then((res) => {
          this.loading = false;
          this.myList = res.data.Data;
          this.finished = true;
          //this.filter.page = res.data.PageIndex;
        })
        .catch((err) => {
          this.finished = true;
        });
    },
    myOnLoad() {
      this.myLoading = true;
      ++this.myFilter.page;
      getRiskMark(this.myFilter).then((res) => {
        this.myLoading = false;
        this.myFilter.page = res.data.PageIndex;
        this.myList = this.myList.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.myFinished = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.risk {
  height: 100vh;
  background-color: #e8f1f8;

  .info_search {
    padding: 10px;
    border-radius: 5px !important;

    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}
.list {
  padding: 10px;
  background-color: #ffffff;
  .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background-color: #fff;
    padding: 20px 10px;
    font-size: 14px;
    border-radius: 8px;
    .list-item-l {
      display: flex;
      align-items: center;
    }
  }
}
.colstyle {
  margin-bottom: 5px;
}
// .choose_btm {
//   display: flex;
//   width: 100%;
//   justify-content: space-between;
//   position: fixed;
//   bottom: 0;
//   background-color: #fff;
//   .choose_cancel {
//     padding: 0 10px;
//     display: flex;
//     align-items: center;
//     float: left;
//   }
//   .choose_confirm {
//     float: right;
//     border-radius: 0;
//   }
// }
</style>
